import React, { Component } from 'react'
import './css/App.css'
import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'
export default class App extends Component {
  state = {
    list: [
      { id: 100, content: '吃饭', isDone: true },
      { id: 101, content: '睡觉', isDone: false },
      { id: 102, content: '打豆豆', isDone: true },
    ],
  }
  Change = (id) => {
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            isDone: !item.isDone,
          }
        }
        return item
      }),
    })
  }
  // 增加todo
  addComment = (content) => {
    this.setState({
      list: [
        {
          id: Math.random,
          content,
          isDone: true,
        },
        ...this.state.list,
      ],
      
    })
  }
  // 删除todo filter方法
  delComment = (id) => {
    this.setState({
      list: this.state.list.filter((item) => item.id !== id),
    })
  }
  render() {
    const { list } = this.state
    return (
      <section className="todoapp">
        <Header addComment={this.addComment} />
        <Main list={list} delComment={this.delComment} Change={this.Change} />
        <Footer />
      </section>
    )
  }
}
